<template>
  <continer class="continer" :isNoTabs='true'>
    <template slot="search">
      <div class="header">
        <span @click="goBack">
          <icon-svg style="color: #C4CDD4;cursor: pointer" iconClass="mianfanhui" ></icon-svg>
        </span>
        <span class="header-title">用户移动端</span>
        <el-button v-if="!isEdit" class="header-btn" type="primary" @click="updateMobileSetting">更改</el-button>
        <el-button v-if="isEdit" class="header-btn" style="right:84px" @click="cancelMobileSetting">取消</el-button>
        <el-button v-if="isEdit" class="header-btn" type="primary" @click="saveMobileSetting">保存</el-button>
      </div>
    </template>
    <template slot="content">
      <PreviewCard :propertyData="propertyData"></PreviewCard>
      <PropertySetting ref="property" :isEdit="isEdit" @formData-change="handlePropertyChange" @is-add="handleIsAdd"></PropertySetting>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import PreviewCard from './PreviewCard.vue'
import PropertySetting from './PropertySetting.vue'
import { commonAction } from '@/utils/common'

@Component({
  name: 'UserSetting',
  components: {
    continer,
    PreviewCard,
    PropertySetting
  }
})
export default class UserSetting extends Vue {
  [x: string]: any
  @Prop({ default: () => ({}) }) private userProp: any
  private propertyData: any = {}
  private isEdit: boolean = false
  private isAdd: boolean = false
  private formId: string = ''
  public handlePropertyChange (val) {
    this.propertyData = val
  }

  public handleIsAdd (val) {
    this.isAdd = val
  }

  public updateMobileSetting () {
    this.isEdit = true
  }

  public cancelMobileSetting () {
    (this.$refs as any).property.formData = JSON.parse(JSON.stringify((this.$refs as any).property.originFormData))
    this.isEdit = false
  }

  public saveMobileSetting () {
    (this.$refs as any).property.$refs.form.validate((valid: any) => {
      if (valid) {
        (this.$refs as any).property.formData.proposeTypeList = (this.$refs as any).property.formData.proposeTypeList.filter((item: { modelId: string }) => item.modelId !== '')
        let url = ''
        let postData = {}
        if (this.isAdd) {
          url = '/server-work/action/facade/insert'
          const addPostData = {
            userSource: 2, // 用户端
            userFacadeConfigInsertReqDTO: JSON.parse(JSON.stringify((this.$refs as any).property.formData))
          }
          addPostData.userFacadeConfigInsertReqDTO.proposeTypeList.map((item: { icon: string }) => {
            item.icon = 'icon-shouhouyun_' + item.icon
            return item
          })
          addPostData.userFacadeConfigInsertReqDTO.allowWxBind = (this.$refs as any).property.formData.allowWxBind ? 1 : 0
          postData = addPostData
        } else {
          url = '/server-work/action/facade/update'
          const editPostData = JSON.parse(JSON.stringify((this.$refs as any).property.formData))
          delete editPostData.userUrl
          editPostData.proposeTypeList.map((item: { icon: string }) => {
            item.icon = 'icon-shouhouyun_' + item.icon
            return item
          })
          editPostData.allowWxBind = editPostData.allowWxBind === true ? 1 : 0
          if (!editPostData.id) {
            editPostData.id = this.formId
          }
          postData = editPostData
        }
        (this.$refs as any).property.originFormData = JSON.parse(JSON.stringify((this.$refs as any).property.formData))
        commonAction({
          url,
          method: 'post',
          data: postData
        }).then(res => {
          if (res.success) {
            if (res.data) {
              this.formId = res.data.id
            }
            this.$message.success('保存成功')
            this.isEdit = false
            this.isAdd = false
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        return false
      }
    })
  }

  public goBack () {
    this.$emit('show-main', 'user')
  }
}
</script>
<style lang="stylus" scoped>
  .continer
  /deep/.handle-wrapper-header
    padding 0 !important
  /deep/.search-box
    width 100%
  .header
    position relative
    height 54px
    width 100%
    padding 0 24px
    .header-title
      margin-left 10px
      height 54px
      line-height 54px
      font-size 14px
      font-family PingFang SC
      font-weight 600
      color #303753
    .header-btn
      position absolute
      top 50%
      right 24px
      transform translate(0, -50%)
</style>
